import React, { Component } from 'react';
import { Dropdown, Icon, Menu, Segment } from 'semantic-ui-react'
import '../styles/topbar.css';


class Topbar extends Component {
  render() {
    return (
      <div>
        <Menu attached='top'>
          <Dropdown item icon='bars' simple>
            <Dropdown.Menu>
              <Dropdown.Header>Management</Dropdown.Header>
              <Dropdown.Item>
                <Icon name='dropdown' />
                <span className='text'>Product</span>
                <Dropdown.Menu>
                  <Dropdown.Item>Product Data Setup</Dropdown.Item>
                  <Dropdown.Item>Product Data Batch Upload</Dropdown.Item>
                </Dropdown.Menu>
              </Dropdown.Item>

              <Dropdown.Item>
                <Icon name='dropdown' />
                <span className='text'>Site</span>
                <Dropdown.Menu>
                  <Dropdown.Item>Site Management</Dropdown.Item>
                  <Dropdown.Item>Region Management</Dropdown.Item>
                  <Dropdown.Item>Vertical Management</Dropdown.Item>
                </Dropdown.Menu>
              </Dropdown.Item>

              <Dropdown.Divider />
              <Dropdown.Header>Sales</Dropdown.Header>
              <Dropdown.Item>
                <Icon name='dropdown' />
                <span className='text'>Report</span>
                <Dropdown.Menu>
                  <Dropdown.Item>Sales Report</Dropdown.Item>
                  <Dropdown.Item>EHS Report</Dropdown.Item>
                </Dropdown.Menu>
              </Dropdown.Item>
              <Dropdown.Item>
                <Icon name='dropdown' />
                <span className='text'>In & Out</span>
                <Dropdown.Menu>
                  <Dropdown.Item>Sale-In Compliance</Dropdown.Item>
                  <Dropdown.Item>Sale-Out Compliance</Dropdown.Item>
                </Dropdown.Menu>
              </Dropdown.Item>

            </Dropdown.Menu>
          </Dropdown>

          <Menu.Menu position='right'>
            <div className='ui right aligned category search item'>
              <div className='ui transparent icon input'>
                <input className='prompt' type='text' placeholder='Search Product/Site...' />
                <i className='search link icon' />
              </div>
              <div className='results' />
            </div>
          </Menu.Menu>
        </Menu>

      </div>
    );
  }
}

export default Topbar;
